<template>
	<screen-page title="仓库看板">
		<div class="page-screen5-container ver-flex-containter">
			<div class="ver-flex-block hor-flex-containter">
				<div class="divider"></div>
				<div class="flex-block ver-flex-containter">
					<div class="ver-flex-block">
						<screen-block title="1#库口执行情况 / 出库">
							<module1 :data-source="data1"  />
						</screen-block>
					</div>
					<div class="ver-flex-block">
						<screen-block title="2#库口执行情况 / 入库">
							<module6 :data-source="data6"  />
						</screen-block>
					</div>
				</div>
				<div class="divider"></div>
				<div class="flex-block flex-block-grow2" style="background-color:#01203c;">
					<module2 />
				</div>
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block title="库存情况">
						<module3 ref="module3" :data-source="data3" />
					</screen-block>
				</div>
				<div class="divider"></div>
			</div>
			<div class="ver-divider"></div>
			<div class="ver-flex-block hor-flex-containter">
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block :title="'待出库任务{'+count1+'}'">
						<module4 :data-source="data4" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
				<div class="flex-block">
					<screen-block :title="'待入库任务{'+count2+'}'">
						<module5 :data-source="data5" v-if="loaded" />
					</screen-block>
				</div>
				<div class="divider"></div>
			</div>
		</div>
	</screen-page>
</template>

<script setup>
import { ref, getCurrentInstance, inject, onMounted, onBeforeUnmount, nextTick } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import ScreenBlock from '@/components/ScreenBlock.vue'
import Module1 from './modules/Screen1Module1.vue'
import Module2 from './modules/Screen5Module2.vue'
import Module3 from './modules/Screen1Module3.vue'
import Module4 from './modules/Screen1Module4.vue'
import Module5 from './modules/Screen1Module5.vue'
import Module6 from './modules/Screen1Module6.vue'

const instance = getCurrentInstance()
const $config = inject('$config')
const $api = inject('$api')

let interval = null;

const count1 = ref(0)
const count2 = ref(0)
const data1 = ref({})
const data3 = ref({})
const data4 = ref([])
const data5 = ref([])
const data6 = ref({})
const loaded = ref(false)

const getData = function(){
	loaded.value = false
	$api.get('SolidWarehouseBoard',{},{block:'screenCenter',loading:true}).then((d)=>{
		data1.value = d.outDiscrepancy || {}
		data6.value = d.inDiscrepancy || {}
		let obj = {
			Material_Count:(d.stockNumber1 || 0),
			Salver_Count:(d.stockNumber2 || 0),
			FREE_Count:(d.stockNumber3 || 0)
		}
		obj.ALL_Count = obj.Material_Count+obj.Salver_Count+obj.FREE_Count
		data3.value = obj
		count1.value = d.outTaskNumber || 0
		count2.value = d.inTaskNumber || 0
		data4.value = d.outTask || []
		data5.value = d.inTask || []
		loaded.value = true
		nextTick(()=>{
			instance.refs.module3.drawChart()
		})
	}).catch(()=>{
		loaded.value = true
	})
}

const createInterval = function(){
	interval = window.setInterval(getData,$config.base.screen.screen5.intervalTime)
}

const destoryIntervel = function(){
	try{
		window.clearInterval(interval)
		interval = null
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style scoped lang="scss">
.page-screen5-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	.divider{
		width: .14em;
		flex-shrink: 0;
	}
	.ver-divider{
		height: .14em;
		flex-shrink: 0;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
	.flex-block-grow2{
		flex-grow: 2;
	}
}
</style>